<template>
  <div class="home_container">
    <el-container class="container">
      <el-header>
        <div class="logo">UXDL</div>
        <div class="userInfo">
          <span>管理员01</span>
          <span>退出</span>
        </div>
      </el-header>
      <el-container>
        <el-aside>
          <el-menu
            default-active="4"
            class="el-menu-vertical-demo"
            background-color="#17172F"
            text-color="#CBCBCB"
            active-text-color="#fff"
            router
            unique-opened
            @open="onOpen"
          >
            <!-- 一级菜单 -->
            <el-submenu index="1" :class="{ on: active === '1' }">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>素材管理</span>
              </template>
              <el-menu-item index="/ad">
                <!-- 二级菜单 -->
                <template slot="title">
                  <!-- 图标 -->
                  <i class="el-icon-location"></i>
                  <!-- 文本 -->
                  <span>广告管理</span>
                </template>
              </el-menu-item>
              <el-menu-item index="/assets">
                <!-- 二级菜单 -->
                <template slot="title">
                  <!-- 图标 -->
                  <i class="el-icon-location"></i>
                  <!-- 文本 -->
                  <span>素材管理</span>
                </template>
              </el-menu-item>
            </el-submenu>
            <el-submenu index="2" :class="{ on: active === '2' }">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>管理中心</span>
              </template>
              <el-menu-item index="/category">
                <!-- 二级菜单 -->
                <template slot="title">
                  <!-- 图标 -->
                  <i class="el-icon-location"></i>
                  <!-- 文本 -->
                  <span>分类管理</span>
                </template>
              </el-menu-item>
              <el-menu-item index="/label">
                <!-- 二级菜单 -->
                <template slot="title">
                  <!-- 图标 -->
                  <i class="el-icon-location"></i>
                  <!-- 文本 -->
                  <span>标签管理</span>
                </template>
              </el-menu-item>
              <el-menu-item index="/user">
                <!-- 二级菜单 -->
                <template slot="title">
                  <!-- 图标 -->
                  <i class="el-icon-location"></i>
                  <!-- 文本 -->
                  <span>用户管理</span>
                </template>
              </el-menu-item>
              <el-menu-item index="/manager">
                <!-- 二级菜单 -->
                <template slot="title">
                  <!-- 图标 -->
                  <i class="el-icon-location"></i>
                  <!-- 文本 -->
                  <span>管理员管理</span>
                </template>
              </el-menu-item>
            </el-submenu>
            <el-submenu index="3" :class="{ on: active === '3' }">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>统计分析</span>
              </template>
              <el-menu-item index="/data">
                <!-- 二级菜单 -->
                <template slot="title">
                  <!-- 图标 -->
                  <i class="el-icon-location"></i>
                  <!-- 文本 -->
                  <span>统计分析</span>
                </template>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'HomeIndex',
  components: {},
  props: {},
  data() {
    return {
      active: 0
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    onOpen(index) {
      console.log(index)
      this.active = index
    }
  }
}
</script>
<style lang="less" scoped>
.home_container {
  height: 100%;
  .container {
    height: 100%;
    .el-header {
      height: 56px !important;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0;
      background-color: #17172f;
      border: 1px solid #202038;
      .logo {
        width: 62px;
        height: 15px;
        font-size: 21px;
        font-family: 'xiaowei';
        font-weight: 400;
        color: #ffffff;
        line-height: 15px;
        padding-left: 64px;
        letter-spacing: 5px;
      }
      .userInfo {
        padding-right: 57px;
        font-size: 13px;
        font-family: 'PingFang SC';
        font-weight: 400;
        color: #cccccc;
        span {
          cursor: pointer;
          padding-left: 10px;
        }
        span:first-child {
          padding-right: 10px;
          border-right: 1px solid #cccccc;
        }
      }
    }
    .el-aside {
      width: 190px !important;
      background-color: #17172f;
      padding-top: 34px;
      border: 1px solid #202038;
      overflow: hidden;
      /deep/ .el-menu {
        width: 160px;
        border: none;
        padding-left: 13px;
        .el-submenu {
          margin-bottom: 5px;
        }
        .on {
          .el-submenu__title {
            height: 30px;
            line-height: 30px;

            background: #663ee7 !important;
            border-radius: 3px !important;
          }
        }

        // .el-menu-item {
        //   height: 30px !important;
        //   line-height: 30px !important;
        // }
      }
    }
    .el-main {
      background-color: #e7e9f1;
      position: relative !important;
    }
  }
}
</style>
